<template>
  <transition name="toast-fade">
    <div class="toast-container" v-if="visible">
      <div class="toast">
        <div class="toast-icon" v-if="type">
          <i :class="typeIcon"></i>
        </div>
        <span class="toast-message">{{ message }}</span>
        <div class="toast-close" v-if="closeable" @click="hide">
          <i class="el-icon-close"></i>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      message: '',
      closeable: false,
      type: 'info', // success, warning, info, error
      duration: 5000, // 默认显示时间（毫秒）
      timer: null,
    };
  },
  computed: {
    typeIcon() {
      const iconMap = {
        success: 'el-icon-success',
        warning: 'el-icon-warning',
        info: 'el-icon-info',
        error: 'el-icon-error'
      };
      return iconMap[this.type] || '';
    }
  },
  methods: {
    show(options = {}) {
      // 清除之前的定时器
      if (this.timer) {
        clearTimeout(this.timer);
        this.timer = null;
      }
      
      // 设置选项
      this.message = options.message || '';
      this.type = options.type || '';
      this.closeable = options.closeable !== undefined ? options.closeable : false;
      this.duration = options.duration !== undefined ? options.duration : 5000; // 默认改为5秒
      
      // 显示提示
      this.visible = true;
      
      // 如果需要自动关闭
      if (this.duration > 0) {
        this.timer = setTimeout(() => {
          this.hide();
        }, this.duration);
      }
      
      return this;
    },
    
    hide() {
      this.visible = false;
      if (this.timer) {
        clearTimeout(this.timer);
        this.timer = null;
      }
    }
  },
  beforeUnmount() {
    // 组件销毁前清除定时器
    if (this.timer) {
      clearTimeout(this.timer);
    }
  }
};
</script>

<style lang="less" scoped>
.toast-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 9999;
  pointer-events: none;
  padding-top: 20px;
}

.toast {
  background: #fff;
  min-width: 300px;
  max-width: 80%;
  padding: 14px 20px;
  border-radius: 4px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12), 0 1px 5px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  pointer-events: auto;
  
  &-icon {
    margin-right: 12px;
    font-size: 18px;
    
    i {
      &.el-icon-success {
        color: #67C23A;
      }
      &.el-icon-warning {
        color: #E6A23C;
      }
      &.el-icon-info {
        color: #409EFF;
      }
      &.el-icon-error {
        color: #F56C6C;
      }
    }
  }
  
  &-message {
    flex: 1;
    font-size: 15px;
    color: #5f6368;
    line-height: 1.4;
    word-break: break-word;
  }
  
  &-close {
    margin-left: 16px;
    cursor: pointer;
    color: #909399;
    font-size: 16px;
    transition: color 0.2s;
    
    &:hover {
      color: #606266;
    }
  }
}

.toast-fade-enter-active {
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.toast-fade-leave-active {
  transition: all 0.25s cubic-bezier(0.23, 1, 0.32, 1);
}

.toast-fade-enter, 
.toast-fade-leave-to {
  transform: translateY(-20px);
  opacity: 0;
}
</style>
